<template>
  <div class='posters'>
    <wc-swiper v-if='slidesList.length' :autoplay='false' :pagination='true' @transitionend='getIndex'>
      <wc-slide v-for='(item, index) in slidesList' :key='index'>
        <div class='poster'>
          <img :class="'poster-'+index" :src='item'>
        </div>
      </wc-slide>
    </wc-swiper>
    <div v-if='showButton' class='confirm' @click='generateImage'>
      确定生成
    </div>
    <div class='poster'>
      <img id="img-result" style='display:none'>
    </div>
    <canvas id="img-canvas" style="display:none"></canvas>
    <div v-if='!showButton' class='save'>
      还等什么,马上长按保存图片分享给朋友们吧
    </div>
    <div id='qrcode' style='display:none'></div>
  </div>
</template>

<script>
import { ACTION_ID } from '../../config/action';
export default {
  data() {
    return {
      currentSlide: 0,
      showButton: true,
      slidesList: [
        '/action-1/img/poster6.jpg',
        '/action-1/img/poster7.jpg',
        '/action-1/img/poster1.jpg',
        '/action-1/img/poster2.jpg',
        '/action-1/img/poster3.jpg',
        '/action-1/img/poster4.jpg'
      ]
    };
  },
  methods: {
    getIndex(currentSlide) {
      this.currentSlide = currentSlide;
    },
    generateImage() {
      /* eslint-disable no-new */
      const ctxId = window._META_INFO.context.id;
      new QRCode(
        document.getElementById('qrcode'),
        `${location.origin}/actions/${ACTION_ID}?ctxId=${ctxId}`
      );
      setTimeout(() => {
        const img1 = document.querySelector('.poster-' + this.currentSlide);
        const img2 = document
          .getElementById('qrcode')
          .getElementsByTagName('img')[0];
        img2.style.display = 'none';
        // const img3 = document.getElementById('img3');
        const canvas = document.getElementById('img-canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img1.naturalWidth;
        canvas.height = img1.naturalHeight;
        ctx.drawImage(img1, 0, 0, img1.naturalWidth, img1.naturalHeight);
        ctx.drawImage(img2, 91, 970, 146, 146);
        // img3.src = canvas.toDataURL('image/png');
        this.slidesList = [];
        const imgResult = document.getElementById('img-result');
        imgResult.src = canvas.toDataURL();
        imgResult.style.display = 'block';
        // canvas.style.display = 'block';
        // img3.style.display = 'block';
        this.showButton = false;
      }, 50);
    }
  }
};
</script>

<style scoped>
#img-canvas {
  width: 100%;
}
.posters {
  width: 100%;
  height: 100%;
}
.poster img {
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  width: calc(100% - 0.8rem - 4px);
  height: 10.2rem;
  border: 2px solid #9f9f9f;
}
.confirm {
  text-align: center;
  margin: 0.4rem auto;
  background: #db2230;
  width: 2.86rem;
  height: 0.68rem;
  color: #fff;
  font-size: 0.36rem;
  line-height: 0.68rem;
  border-radius: 0.3rem;
}
.save {
  text-align: center;
  font-size: 0.28rem;
  color: #282828;
  line-height: 1.54rem;
}
</style>
